<template>
  <table class="m-table">
    <thead>
      <tr>
        <th class="first w1"><div class="wp">&nbsp;</div></th>
        <th><div class="wp af0"></div></th>
        <th class="w2"><div class="wp af1"></div></th>
        <th class="w3"><div class="wp af2"></div></th>
        <th class="w4"><div class="wp af3"></div></th>
      </tr>
    </thead>
    <tbody v-if="flag">
      <tr
        v-for="(item, index) in info"
        :key="item.id"
        :class="index % 2 === 0 ? 'even' : ''"
      >
        <td class="left">
          <div class="hd">
            <span class="ply" @mouseup="play(item)">&nbsp;</span>
            <span class="num">{{ index + 1 }}</span>
          </div>
        </td>
        <td>
          <div class="f-cb">
            <div class="tt">
              <div class="ttc">
                <span class="txt"
                  ><a href="/song?id=414611211"
                    ><span :title="item?.name">{{ item?.name }}</span></a
                  ></span
                >
              </div>
            </div>
          </div>
        </td>
        <td class="s-fc3">
          <span class="u-dur" v-text="formattingTime(item?.dt)"></span>
          <div class="opt hshow">
            <AddIcon :data="item"></AddIcon>
            <CollectIcon></CollectIcon>
            <ShareIcon></ShareIcon>
            <DownLoadIcon></DownLoadIcon>
          </div>
        </td>
        <td class="">
          <div
            class="text"
            :title="meageTitle(item?.ar)"
            v-html="meageElement(item?.ar)"
          ></div>
        </td>
        <td class="">
          <div class="text">
            <a href="/album?id=34706535" :title="item?.al?.name">{{ item?.al?.name }}</a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <el-skeleton :rows="5" v-if="!flag" class="m" />
</template>

<script>
import AddIcon from "@/encapsulation/SongFn/AddIcon.vue";
import CollectIcon from "@/encapsulation/SongFn/CollectIcon.vue";
import DownLoadIcon from "@/encapsulation/SongFn/DownLoadIcon.vue";
import ShareIcon from "@/encapsulation/SongFn/ShareIcon.vue";
import { inject } from "@vue/runtime-core";
import { formattingTime } from "@/baseFnMixin/formattingTime/formattingTime.js";
import { meageElement, meageTitle } from "@/baseFnMixin/mergeName/mergeNameMixin.js";
import addAndPlaySongMixin from "@/baseFnMixin/playlist/addAndPlaySongMixin.js";
export default {
  name: "SongListTable",
  components: { AddIcon, CollectIcon, DownLoadIcon, ShareIcon },
  setup() {
    const info = inject("songlistInfo");
    const play = addAndPlaySongMixin();
    const flag = inject("flag");
    return {
      info,
      formattingTime,
      meageElement,
      meageTitle,
      play,
      flag,
    };
  },
};
</script>

<style scoped lang="less">
.m-table {
  width: 100%;
  border: 1px solid #d9d9d9;

  .w1 {
    width: 74px;
  }
  .w2 {
    width: 111px px;
  }
  .w3 {
    width: 14%;
  }
  th {
    vertical-align: top;
    text-align: left;
    font-weight: normal;
    color: #666;
  }
  th {
    background: url("../../common/images/table.png") no-repeat 0 -56px;
    .wp {
      height: 18px;
      line-height: 18px;
      padding: 8px 10px;
      background: url("../../common/images/table.png") no-repeat 0 -56px;
    }
  }
  th.first {
    .wp {
      background: none;
    }
  }
  .af2:after {
    content: "\6b4c \624b";
  }
  .w4 {
    width: 20%;
  }
  .af3:after {
    content: "\4e13 \8f91";
  }
  .af0:after {
    content: "\6b4c \66f2 \6807 \9898";
  }
  .af1:after {
    content: "\65f6 \957f";
  }
  th {
    height: 38px;
    background-color: #f7f7f7;
    background-position: 0 0;
    background-repeat: repeat-x;
  }
  td {
    padding: 6px 10px;
    line-height: 18px;
    text-align: left;
  }
  td {
    background: url("../../common/images/table.png") no-repeat 0 9999px;
  }
  .hd {
    height: 18px;
    .ply {
      float: right;
    }
    .num {
      width: 25px;
      margin-left: 5px;
      color: #999;
    }
  }
  .ply {
    width: 17px;
    height: 17px;
    background: url("../../common/images/table.png") no-repeat 0 -103px;
    cursor: pointer;
    &:hover {
      background-position: 0 -128px;
    }
  }
  .tt {
    float: left;
    width: 100%;
  }
  .ttc {
    height: 18px;
    margin-right: 20px;
  }
  .txt {
    position: relative;
    display: inline-block;
    padding-right: 25px;
    margin-right: -25px;
    max-width: 99%;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .text {
    width: 100%;
    position: relative;
    zoom: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    a {
      white-space: nowrap;
    }
  }
  .hshow {
    display: none;
  }
  .opt {
    height: 18px;
    float: left;
  }
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.even {
  td {
    background-color: #f7f7f7;
  }
}
tbody {
  tr {
    &:hover {
      .hshow {
        display: block;
      }
      .u-dur {
        display: none;
      }
    }
  }
}
.u-dur {
  float: left;
}
.opt /deep/ {
  .collect {
    margin: 0 0 0 4px;
  }
  .add {
    margin: 2px 0 0 4px;
  }
}
.m {
  margin-top: 10px;
}
</style>
